<template>
	<el-container>
		<el-header style="height: auto;" >
			<div class="header-container">
				<el-card class="" style=" padding: -20px !important;">

					<el-row :gutter="15" style="width: 100%; ">
						<el-col :lg="5" style="">
							<div style="height: 155px;
											color: #ffffff;
											background: linear-gradient(to right, #007DE6, #5F78DC);
											box-shadow: var(--el-box-shadow-light); ">
								<p style=" font-size: 46px;
												position: relative;
												font-weight: 900;
												display: flex;
												justify-content: center;
												font-family: 'Times New Roman';

												top: 40px;">
									{{this.totalBuilding}}</p>
								<p class="time" style='display: flex;
												justify-content: center;
												font-size: 14px;
												margin-top: 50px;'>
									楼宇总数量（栋）
								</p>
							</div>

						</el-col>
						<el-col :lg="5" style="">
							<div style="height: 155px;
											color: #ffffff;
											background: linear-gradient(to right, #007DE6, #5F78DC);
											box-shadow: var(--el-box-shadow-light); ">
								<p style=" font-size: 46px;
												position: relative;
												font-weight: 900;
												display: flex;
												justify-content: center;
												font-family: 'Times New Roman';
												top: 40px;">
									{{this.totalEnterprise}}</p>
								<p class="time" style='display: flex;
												justify-content: center;
												font-size: 14px;
												margin-top: 50px;'>
									入驻企业数量（家）
								</p>
							</div>

						</el-col>
						<el-col :lg="14" style="">
							<div class="switch-container"
								style="height:100px !important;display: flex;align-items: center; justify-content: center;margin-top: 25px;">
								<el-button type="primary" icon="el-icon-arrow-left-bold" style="height:100px !important ; margin-right: 50px;"
									@click="onBuildingPrevClick"></el-button>
								<el-dropdown @command="handleParkCommand">
									<span class="el-dropdown-link">
										{{ selectedPark.park_id }}<el-icon
											class="el-icon--right"><el-icon-arrow-down /></el-icon>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item v-for="item in getParkListByMap" :command="item.park_id" style="margin-right: 20px;"
												:key="item.park_id">
												{{ item.park_id }}
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-dropdown @command="handlePartitionCommand" v-show="selectPartition.area_id">
									<span class="el-dropdown-link">
										{{ selectPartition.area_id }}<el-icon
											class="el-icon--right"><el-icon-arrow-down /></el-icon>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item v-for="item in getPartitionListByMap" style="margin-right: 20px;"
												:command="item.area_id" :key="item.area_id">
												{{ item.area_id }}
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-dropdown @command="handleBuildingCommand" v-show="selectedBuilding.id">
									<span class="el-dropdown-link">
										{{ selectedBuilding.name }}<el-icon
											class="el-icon--right"><el-icon-arrow-down /></el-icon>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item v-for="item in getBuildingListByMap" :command="item.id"
												:key="item.id">
												{{ item.name }}
											</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-button type="primary" icon="el-icon-arrow-right-bold"
									style="height:100px !important;margin-left: 50px;" @click="onBuildingNextClick"></el-button>

							</div>

						</el-col>


					</el-row>


					<!-- <div class="split-line"></div> -->
				</el-card>
			</div>
		</el-header>
		<el-header style="height: auto;padding-top: 0px !important;">
			<div class="header-container">

				<div class="header-container"  style="height: auto;">
					<el-card  style=" padding: 0px !important;">
						<el-row  style="width: 100%;">
							<el-col :lg="4" style="border-right: 1px solid #e4e7ed;border-radius: unset;height: 100px;display: flex;align-items: center; justify-content: center;"
								v-for="item in statisticalTotalList" :key="item">
								<div class="num_info">
									<p style="font-size: 28px;font-family: 'Times New Roman';">{{ item.value }}</p>
									<div style="font-size: 14px;">{{ item.name }}</div>
								</div>
							</el-col>

						</el-row>
					</el-card>
				</div>
			</div>
		</el-header>

		<el-main style="background-color: #ffffff;">
			<div class="building-switch">
				<div class="operation-container">

					<el-button type="success" icon="el-icon-calendar" @click="onStrategyClick">策略</el-button>
					<el-button type="danger" icon="el-icon-calendar" @click="onReservationClick">预约</el-button>
					<el-button type="primary" icon="el-icon-calendar" @click="onEnteringParkClick">入驻</el-button>
					<el-button type="warning" icon="el-icon-calendar" @click="onRentingClick">退租</el-button>
				</div>

				<div class="building-type" style="float:right">
					<div>
						<el-button type="a" @click="showClick" v-show="showDataTable">查看数据表</el-button>
						<el-button type="a" @click="showClickReturn" v-show="showDataChart">查看空间信息表</el-button>
					</div>
					<!-- <div class="item-type-list"
						 v-for="item in typeList" :key="item">
						<div class="item-name">{{ item.name }}:</div>
						<div class="item-color" :class="item.color"></div>
					</div> -->
				</div>
			</div>
			<div class="byted-weektime" >
				<div class="calendar" >
					<table class="calendar-table" style="width:100%" v-if="tableShow">
						<thead class="calendar-head">
							<tr>
								<td class="week-td">配套设施</td>
								<td v-for="item in supportingFacilitiesList" :key="item"  colspan="2" >
									<tr>
										<el-popconfirm title="确定删除吗？" @confirm="remove(item.building_support_id)">
											<template #reference>
												<el-button  class="close" type="danger" plain icon="el-icon-close" size="small"></el-button>
											</template>
										</el-popconfirm>
									</tr>
									<p>{{ item.key }}</p>
									<p>{{ item.value }}</p>

								</td>
								<td :colspan="100 - supportingFacilitiesList.length * 2">
									<el-button type="primary" icon="el-icon-plus" @click="onSupportingFacilitiesClick">
										增加配套设施
									</el-button>
								</td>
							</tr>
							<tr>
								<th rowspan="6" class="week-td">楼层列表</th>
								<th colspan="94">楼层</th>
							</tr>
						</thead>
						<tbody id="tableBody">
							<div id="kuang"
								:style="{ width: kuangObj.width + 'px', height: kuangObj.height + 'px', top: kuangObj.top + 'px', left: kuangObj.left + 'px', bottom: kuangObj.bottom + 'px', right: kuangObj.right + 'px' }">
							</div>
							<tr v-for="room in roomList" :key="room.roomId">
								<td>
									<p>{{ room.name }}</p>
									<p>{{ room.size }}m²</p>
								</td>
								<td @mousedown.prevent="testCanTest(i, room.space_id) && onHandleMouseDown(i, room.space_id)"
									@mouseup.prevent="testCanTest(i, room.space_id) && onHandleMouseUp(i, room.space_id)"
									:colspan="item.colSpan" :class="getColorByStatus(item.category)"
									v-for="(item, i) in floorBlockMap[room.floor]" :key="i">

									<!--预约-->
									<div v-if="(item.category === 3) && item.appointmentList.length > 0">
										<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
											<sc-icon-Kehu style="height: 1.1em;width: 1.1em;color: #1c6ca1;" />
										</el-icon>
										<span v-if="item.appointmentList[0].ep_name">预约1：{{
											item.appointmentList[0].ep_name
										}}</span>
										<span v-else>洽谈中</span>

									</div>

									<!--招商话术-->
									<div v-if="item.category === 2 && item.noteList.length > 0">
										<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
											<sc-icon-Liwuhuodong style="height: 1.1em;width: 1.1em;color: #1c6ca1;" />
										</el-icon>
										{{ item.noteList[0].notes_title }}

									</div>
									<!--已有公司-->
									<div v-if="item.category === 4 && item.checkinList.length > 0">
										<p>{{ item.checkinList[0].ep_name }}</p>

									</div>

									<p>{{ item.room }} ({{ getRoomSize(item) }}m²)</p>

									<!--已有公司-->
									<div v-if="item.category === 4 && item.checkinList.length > 0">
										<p v-if="item.checkinList[0].valid_date">{{
											item.checkinList[0].valid_date }}到期
										</p>

									</div>
								</td>
							</tr>
							<!-- <tr>
							<td colspan="49" class="td-table-tip">
								<div class="clearfix">
									<span class="pull-left tip-text">选择楼宇以查看整体规划</span>
								</div>
							</td>
						</tr> -->
						</tbody>
					</table>
				</div>
			</div>
			<scTable ref="table" :data="spaceDataList" row-key="meetingId" stripe v-show="meetingShow">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="空间编码" prop="space_id" width="150"></el-table-column>
				<el-table-column label="空间名称" prop="room" width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="所在楼层(F)" prop="floor" width="150"></el-table-column>
				<el-table-column label="空间面积(m²)" prop="room_size" width="150"></el-table-column>
				<el-table-column label="租金定价(元/m²/天)" prop="rental_pricing" width="150"></el-table-column>

				<el-table-column label="空间状态" prop="category" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.category === 1" class="renting-termination-type-color">退租</el-tag>
						<el-tag v-if="scope.row.category === 2" class="strategy-type-color">策略</el-tag>
						<el-tag v-if="scope.row.category === 3" class="negotiation-type-color">预约</el-tag>
						<el-tag v-if="scope.row.category === 4" class="rented-type-color">入驻</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否推荐" prop="recommended" width="150"></el-table-column>
				<!-- <el-table-column label="公司详情" fixed="right" align="right" width="170">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small">预约记录</el-button>
							<el-button text type="primary" size="small">策略话术</el-button>
						</el-button-group>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
	</el-container>
	<reservation-dialog v-if="reservationDialog" ref="reservationDialog" @success="onSuccessClick"
		@closed="onDialogCloseClick"></reservation-dialog>
	<strategy-dialog v-if="strategyDialog" ref="strategyDialog" @success="onSuccessClick"
		@closed="onDialogCloseClick"></strategy-dialog>
	<entering-park-dialog v-if="enteringParkDialog" ref="enteringParkDialog" @success="onSuccessClick"
		@closed="onDialogCloseClick"></entering-park-dialog>
	<renting-dialog v-if="rentingDialog" ref="rentingDialog" @success="onSuccessClick"
		@closed="onDialogCloseClick"></renting-dialog>
	<supporting-facilities-dialog v-if="supportingFacilitiesDialog" ref="supportingFacilitiesDialog"
		@success="onSupportingFacilitiesSuccess" @closed="onDialogCloseClick"></supporting-facilities-dialog>
</template>

<script>
import reservationDialog from "@/views/attractinvestment/spacePlan/reservation.vue";
import strategyDialog from "@/views/attractinvestment/spacePlan/strategy.vue";
import enteringParkDialog from "@/views/attractinvestment/spacePlan/enteringPark.vue";
import rentingDialog from "@/views/attractinvestment/spacePlan/renting.vue";
import scSelectFilter from "@/components/scSelectFilter/index.vue"
import supportingFacilitiesDialog from "@/views/attractinvestment/spacePlan/supportingFacilities.vue";

export default {
	name: 'Apply Meeting',
	components: { scSelectFilter, reservationDialog, strategyDialog, enteringParkDialog, rentingDialog, supportingFacilitiesDialog },
	data() {
		return {
			kuangObj: {
				width: 0,
				height: 0,
				top: 0,
				left: 0,
				bottom: 0,
				right: 0,
				oldLeft: 0,
				oldTop: 0,
				flag: false
			},
			refreshKey: 0,
			meetingShow: false,
			tableShow: true,
			showDataTable: true,
			showDataChart: false,
			buildingType: '99',
			parkModel: [12],
			parkBuildingMap: {},
			typeList: [
				{ name: '空置', status: 1, color: 'vacant-color' },
				{ name: '策略', status: 2, color: 'strategy-color' },
				{ name: '预约', status: 3, color: 'negotiation-color' },
				{ name: '入驻', status: 4, color: 'rented-color' }
			],
			dialogTableVisible: false,
			labelPosition: 'top',
			filterData: [],
			reservationDialog: false,
			strategyDialog: false,
			enteringParkDialog: false,
			rentingDialog: false,
			supportingFacilitiesDialog: false,
			reduceBtn: true,
			selectedBuilding: {},
			roomList: [], //楼层列表
			floorBlockMap: {},
			roomId: '',
			beginTime: 0,
			downEvent: false,
			type: '99', //是否签约
			floorData: [],
			noteMap: {},
			contextMenuItem: null,
			checkMap: {},
			totalBuilding: 0,
			totalEnterprise: 0,
			floorMap: {}, //每楼层的map
			totalAreaCount: 40851, //总管理面积
			investmentAreaCount: 24701, //剩余可招商面积
			totalRoomCount: 120, //总房间数量
			investmentRoomCount: 75,//剩余可招商房间数量
			dayMeetingList: [],
			selectedPark: {},
			selectPartition: {},
			selectBuilding: {},
			partitionMap: {},
			buildingMap: {},
			parkMap: {},
			statisticalTotalList: [],
			supportingFacilitiesList: [],
			spaceDataList: []
		}
	},
	mounted() {
		this.loadParkList()
	},
	computed: {
		getParkListByMap() {
			let data = [];
			for (let item in this.parkMap) {
				data.push(this.parkMap[item]);
			}
			return data;
		},
		getPartitionListByMap() {
			let data = [];
			for (let item in this.partitionMap) {
				data.push(this.partitionMap[item]);
			}
			return data;
		},
		getBuildingListByMap() {
			let data = [];
			for (let item in this.buildingMap) {
				data.push(this.buildingMap[item]);
			}
			return data;
		}
	},
	methods: {
		/**
		 * 获取预约列表
		 * @param item
		 */
		getAppointmentList(item) {

		},
		/**
		 * 获取当前层的面积
		 * @param item
		 * @returns {*|string}
		 */
		getRoomSize(item) {
			return item.size !== undefined ? item.size : item.room_size;
		},
		async loadSupportingFacilities(id) {
			this.supportingFacilitiesList.splice(0);
			let data = await this.getBuildingSupportListByBuildingId(id);
			this.supportingFacilitiesList = data;
		},
		async loadStatisticalTotalList(id) {
			this.statisticalTotalList=[];
			this.selectBuilding;
			let checkData = await this.getCheckinData(id);
			this.totalBuilding = checkData.totalBuilding;
			this.totalEnterprise = checkData.totalEnterprise;
			let carrierCount = await this.getCarrierCount(id);
			this.statisticalTotalList.push({ name: '总层数', value: checkData.totalNum });
			this.statisticalTotalList.push({ name: '总面积(m²)', value: checkData.totalArea });
			this.statisticalTotalList.push({ name: '空置率', value: checkData.emptyPencent + '%' });
			this.statisticalTotalList.push({ name: '服务配套面积(m²)', value: carrierCount.totalSupport });
			this.statisticalTotalList.push({ name: '车位数量(个)', value: carrierCount.totalPark });
			this.statisticalTotalList.push({ name: '入驻企业（家）', value: checkData.enterpriseNumber });

			// this.statisticalTotalList.push({name: '园区数量', value: carrierCount.parkNumber});
			// this.statisticalTotalList.push({name: '片区', value: carrierCount.areaNumber});
			// this.statisticalTotalList.push({name: '项目', value: carrierCount.projectNumber});
			// this.statisticalTotalList.push({name: '楼宇数量', value: carrierCount.buildingNumber});
			// this.statisticalTotalList.push({name: '空置率', value: checkData.emptyPencent * 100 + '%'});
		},
		async loadParkList() {
			let parkList = await this.getParkList();
			this.parkMap = {};
			parkList.forEach(item => {
				this.parkMap[item.park_id] = item;
			})
			if (parkList.length > 0) {
				this.selectedPark = parkList[0];
				await this.loadPartitionList(this.selectedPark.park_id);
			}
		},
		async loadPartitionList(parkId) {
			let partitionList = await this.getAreaListByParkId(parkId);
			this.partitionMap = {};
			partitionList.forEach(item => {
				this.partitionMap[item.area_id] = item;
			})
			if (partitionList.length > 0) {
				this.selectPartition = partitionList[0]
				await this.loadBuildingList(this.selectPartition.area_id);
			} else {
				this.selectedBuilding = {}
				this.selectPartition = {}
			}
		},
		async loadBuildingList(partitionId) {
			let buildingList = await this.getBuildingListByAreaId(partitionId);
			this.buildingMap = {};
			buildingList.forEach(item => {
				this.buildingMap[item.id] = item;
			})
			if (buildingList.length > 0) {
				this.selectedBuilding = buildingList[0];
				await this.loadBuildingLayers();
				await this.loadSupportingFacilities(this.selectedBuilding.id);
				await this.loadStatisticalTotalList(this.selectedBuilding.id);//加载统计总量数据
			}
		},
		handleParkCommand(command) {
			this.selectedPark = this.parkMap[command];
			this.loadPartitionList(this.selectedPark.park_id);
		},
		handlePartitionCommand(command) {
			this.selectPartition = this.partitionMap[command];
			this.loadBuildingList(this.selectPartition.area_id);
		},
		handleBuildingCommand(command) {
			this.selectedBuilding = this.buildingMap[command];
			this.loadSupportingFacilities(this.selectedBuilding.id);
		    this.loadStatisticalTotalList(this.selectedBuilding.id);//加载统计总量数据
			this.loadBuildingLayers(); //加载楼宇数据
		},
		/**
		 * 打开预约弹窗
		 */
		onReservationClick() {
			this.reservationDialog = true;
			this.$nextTick(() => {
				this.$refs.reservationDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
			})
		},
		/**
		 * 打开策略话术弹窗
		 */
		onStrategyClick() {
			this.strategyDialog = true;
			this.$nextTick(() => {
				this.$refs.strategyDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
			})
		},
		/**
		 * 打开入驻弹窗
		 */
		onEnteringParkClick() {
			this.enteringParkDialog = true;
			this.$nextTick(() => {
				//this.$refs.enteringParkDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
				this.$refs.enteringParkDialog.open().createRoomListForSpacePlan(this.selectedBuilding.building_id)
			});

		},

		/**
		 * 打开退租弹窗
		 */
		onRentingClick() {
			this.rentingDialog = true;
			this.$nextTick(() => {
				this.$refs.rentingDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
			})
		},

		/**
		 * 增加配套设施按钮
		 */
		onSupportingFacilitiesClick() {
			this.supportingFacilitiesDialog = true;
			this.$nextTick(() => {
				this.$refs.supportingFacilitiesDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
			})
		},
		/**
		 * 根据状态获取class color
		 * @param status 状态 1:空置 2:策略 3:入驻
		 * @returns {string}
		 */
		getColorByStatus(status) {
			let className = '';
			if (status === 2) {
				className = 'strategy-color';
			} else if (status === 3) {
				className = 'negotiation-color';
			} else if (status === 4) { //入驻
				className = 'rented-color';
			} else {
				className = 'vacant-color';
			}
			return className;
		},
		/**
		 * 关闭但窗
		 */
		onDialogCloseClick() {
			this.reservationDialog = false;
			this.enteringParkDialog = false;
			this.strategyDialog = false;
			this.supportingFacilitiesDialog = false;
			this.rentingDialog = false;
		},
		/**
		 * 关闭但窗本地更新数据
		 */
		onSuccessClick(room) {
			console.log(room)
			this.getFloorByBuildingId(this.selectedBuilding.building_id,room) 
			this.loadBuildingLayers(); 
		},
		onSupportingFacilitiesSuccess() {
			//重新加载配套设施
			this.loadSupportingFacilities(this.selectedBuilding.id);
			 this.loadStatisticalTotalList(this.selectedBuilding.id);//加载统计总量数据
		},
		/**
		 * 获取园区列表
		 * @returns {Promise<*>}
		 */
		async getParkList() {
			//更改园区从楼宇表中获取，用户在楼宇功能中手动输入园区
			let res = await this.$API.attractinvestment.building_new.getParkList.get();
			// let res = await this.$API.attractinvestment.park.getParkList.get({pageSize: 500});
			if (res.code === 200) {
				return res.data;
			} else {
				await this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 根据园区获取分区列表
		 * @returns {Promise<*>}
		 */
		async getAreaListByParkId(park_id) {
			let res = await this.$API.attractinvestment.building_new.getBuildingAreaByParkId.get({ park_id: park_id });
			if (res.code === 200) {
				return res.data;
			} else {
				await this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 根据分区id获取楼宇列表
		 * @returns {Promise<*>}
		 */
		async getBuildingListByAreaId(area_id) {
			let res = await this.$API.attractinvestment.building_new.getBuildingByAreaId.get({ area_id: area_id });
			if (res.code === 200) {
				return res.data;
			} else {
				await this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取楼层以及楼层下面所属的所有空间信息
		 * @returns {Promise<*>}
		 */
		async getFloorSpaceByBuildingId(building_id) {
			let res = await this.$API.attractinvestment.building.getFloorSpaceByBuildingId.get({ building_id: building_id });
			if (res.code === 200) {
				return res.data
				// let list = res.data;
				// let sorList = list.sort((a,b)=>Math.floor(a.floor) - Math.floor(b.floor))
				// return sorList;
			} else {
				await this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取楼宇列表
		 * @returns {Promise<*>}
		 */
		async getBuildingList() {
			let res = await this.$API.attractinvestment.building.getBuildingList.get({ pageSize: 500 });
			if (res.code === 200) {
				return res.data.list;
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 根据楼宇id获取配套设施列表
		 * @returns {Promise<*>}
		 */
		async getBuildingSupportListByBuildingId(buildingId) {
			let res = await this.$API.attractinvestment.building.getBuildingsupportListByBuildingId.get({ building_id: buildingId });
			if (res.code === 200) {
				return res.data;
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 根据楼宇ID获取楼层所属的空间信息
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getFloorByBuildingId(id,room) {
			let allData = await this.getFloorSpaceByBuildingId(this.selectedBuilding.building_id);
			// 根据楼层ID获取空间
			let spaceData = await this.getSpaceByBuildingId(this.selectedBuilding.building_id);
			this.spaceDataList = spaceData;
			// 根据楼层ID获取空间
			let reverseData = await allData.sort();
			this.floorBlockMap = [];
			reverseData.map(item => {
				let spaceList = item.spaceList;
				if (this.floorBlockMap[item.floor] === undefined) {
					this.floorBlockMap[item.floor] = []
					if (spaceList.length > 0) {
					this.floorBlockMap[item.floor].push(...spaceList);
				}
				}

				if (this.floorBlockMap[item.floor].length === 0) {
					this.floorBlockMap[item.floor].push({
						id: item.id,
						size: item.room_size,
						room: item.room,
						floor: item.floor,
						category: item.category,
						status: 1,
						colSpan: 100
					});
				} else {
					let totalSize = item.room_size;
					let sumSize = 0;
					 
					this.floorBlockMap[item.floor].map(fitem => {
						if(room && room == fitem.room){
							fitem.category = 4
						}
					
						let roomSize = parseInt(fitem.room_size);
						fitem.colSpan = ((roomSize / totalSize) * 100).toFixed(0);
						sumSize += roomSize;
					})
					if (totalSize > sumSize) {
						// this.floorBlockMap[item.id].push({
						// 	id: 0,
						// 	size: totalSize - sumSize,
						// 	status: 1,
						// 	colSpan: (100 - ((sumSize / totalSize) * 100)).toFixed(0)
						// });
					} else {
						totalSize = sumSize;
						this.floorBlockMap[item.floor].map(item => {
							let roomSize = parseInt(item.room_size);
							item.colSpan = ((roomSize / totalSize) * 100).toFixed(0);
							sumSize += roomSize;
						});
						item.area = totalSize;
					}
				}

			});
			console.log(this.floorBlockMap)
			return reverseData;
		},
		/**
		 * 获取楼宇的入住信息
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getCheckinByBuildingId(building_id) {
			let res = await this.$API.attractinvestment.building.getCheckinByBuildingId.get({ building_id: building_id });
			if (res.code === 200) {
				return res.data.reverse();
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取楼宇的话术信息
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getNoteByBuildingId(id) {
			let res = await this.$API.attractinvestment.building.getNoteByBuildingId.get({ building_id: id });
			if (res.code === 200) {
				return res.data.reverse();
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取楼宇的空间
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getSpaceByBuildingId(building_id) {
			let res = await this.$API.attractinvestment.building.getSpaceByBuildingId.get({ building_id: building_id });
			if (res.code === 200) {
				return res.data.sort();
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取载体数量统计
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getCarrierCount(id) {
			let res = await this.$API.attractinvestment.building.getCarrierCount.get({"id":id});
			if (res.code === 200) {
				return res.data;
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 获取载体数量统计
		 * @param id 楼宇ID
		 * @returns {Promise<*>}
		 */
		async getCheckinData(id) {
			let res = await this.$API.attractinvestment.building.getCheckinData.get({"id":id});
			if (res.code === 200) {
				return res.data;
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		/**
		 * 楼宇选中事件
		 * @param changeValue 选中后的值 [2,3] [一级ID，二级ID]
		 */
		onParkBuildingChange(changeValue) {
			this.floorData.splice(0);
			changeValue.map((item, index) => {
				let buildingItem = this.parkBuildingMap[item[0]][item[1]];
				if (index === 0) {
					this.selectedBuilding = buildingItem;
				}
				this.floorData.push({ id: buildingItem.id, name: buildingItem.name });
			});
		},
		/**
		 * 测试方法
		 * @param i
		 * @param roomId
		 * @returns {boolean}
		 */
		testCanTest(i, roomId) {
			return true;
		},
		/**
		 * 加载楼宇层数
		 * @returns {Promise<void>}
		 */
		async loadBuildingLayers() {
			if (this.selectedBuilding.name === '') {
				this.roomList = this.floorData[0].data;
				this.selectedBuilding.name = this.floorData[0].name;
			} else {
				this.floorData.forEach(item => {
					if (item.name === this.selectedBuilding.name) {
						this.roomList = item.data;
						this.selectedBuilding.name = item.name;
					}
				})
			}
			let data = await this.getFloorByBuildingId(this.selectedBuilding.id);
			if (data.length > 0) {
				this.roomList = []
				for (let i = 0; i < data.length; i++) {
					this.roomList.push({
						id: data[i].id,
						name: data[i].floor + '层',
						floor: data[i].floor,
						spaceData: data[i].spaceList,
						size: this.getTotalAreaBySpace(data[i], data[i].room_size)
					});
				}
			} else {
				this.roomList = []
				for (let i = this.selectedBuilding.total_number_layers; i > 0; i--) {
					this.roomList.push({ id: (i ), name: (i) + '层' });
				}
			}
		},
		getTotalAreaBySpace(spaceData, areaSize) {
			let totalSize = 0;
			totalSize = parseInt(spaceData.room_size);
			// spaceData.map(item => {
			// 	totalSize = parseInt(item.room_size);
			// });
			if (areaSize > totalSize) {
				totalSize = areaSize;
			}
			return totalSize;
		},
		/**
		 * 滑动按下事件
		 * @param i
		 * @param roomId
		 */
		onHandleMouseDown(i, roomId) {
			this.downEvent = true //按下时鼠标不在范围内则不算
			this.roomId = roomId
			this.beginTime = i
		},
		/**
		 * 滑动松开事件
		 * @param i
		 * @param roomId
		 */
		onHandleMouseUp(i, roomId) {
			//当点击事件是在table内才触发选取数据操作
			if (this.downEvent) {
				//选时间段
				let _this = this
				let begin = this.beginTime
				let start = begin <= i ? begin : i //x轴 起点
				let length = Math.abs(begin - i)
				let end = start + length           //x轴 终点
				let flag = false;
				//当框选范围内所有块都是选中状态时,执行反选
				for (let y = start; y < end + 1; y++) {
					if (_this.floorBlockMap[roomId][y].class == null) {
						flag = true
					}
				}
				if (flag) {
					// for (let y = start; y < end + 1; y++) {
					//   if (this.floorBlockMap[roomId][y].status === 1) {
					//     this.floorBlockMap[roomId][y].status = 2
					//     this.floorBlockMap[roomId][y].class = 'strategy-color'
					//   } else if (this.floorBlockMap[roomId][y].status === 2) {
					//     this.floorBlockMap[roomId][y].status = 3
					//     this.floorBlockMap[roomId][y].class = 'rented-color'
					//   } else if (this.floorBlockMap[roomId][y].status === 3) {
					//     this.floorBlockMap[roomId][y].status = 1
					//     this.floorBlockMap[roomId][y].class = 'vacant-color'
					//   }
					// }
				} else { //反选
					for (let y = start; y < end + 1; y++) {
						this.floorBlockMap[roomId][y].class = null
					}
				}
				this.downEvent = false
			}
			this.reservationDialog = true;
			this.$nextTick(() => {
				this.$refs.reservationDialog.open().setCreateData({ building: this.selectedBuilding }, this.roomList)
			})
			//当点击事件是在table内才触发选取数据操作
			if (this.downEvent) {
				if (this.floorBlockMap[roomId][i].status === 1) {
					this.floorBlockMap[roomId][i].class = 'ui-strategy'
					this.floorBlockMap[roomId][i].status = 2
				} else if (this.floorBlockMap[roomId][i].status === 2) {
					this.floorBlockMap[roomId][i].class = 'ui-rented'
					this.floorBlockMap[roomId][i].status = 3
				} else if (this.floorBlockMap[roomId][i].status === 3) {
					this.floorBlockMap[roomId][i].class = ''
					this.floorBlockMap[roomId][i].status = 1
				}
			}
		},
		/**
		 * 切换下一个楼宇事件
		 */
		onBuildingNextClick() {	
			let buildingData = Object.values(this.buildingMap);
			for (let i = 0; i < buildingData.length; i++) {
				if (buildingData[i].id === this.selectedBuilding.id) {
					if (buildingData.length === (i + 1)) {
						this.selectedBuilding = buildingData[0];
					} else if ((i + 1) < buildingData.length) {
						this.selectedBuilding = buildingData[i + 1];
					}
					break;
				}
			}
			this.loadStatisticalTotalList(this.selectedBuilding.id);//加载统计总量数据
			this.loadSupportingFacilities(this.selectedBuilding.id) 
			this.loadBuildingLayers();
		},
		/**
		 * 上一个楼宇点击事件
		 */
		onBuildingPrevClick() {
			let buildingData = Object.values(this.buildingMap);
			for (let i = 0; i < buildingData.length; i++) {
				if (buildingData[i].name === this.selectedBuilding.name) {
					if (i === 0) {
						this.selectedBuilding = buildingData[buildingData.length - 1];
					} else {
						this.selectedBuilding = buildingData[i - 1];
					}
					break;
				}
			}
			this.loadStatisticalTotalList(this.selectedBuilding.id);//加载统计总量数据
			this.loadSupportingFacilities(this.selectedBuilding.id) 
			this.loadBuildingLayers();
		},
		showClick() {
			this.meetingShow = true;
			this.tableShow = false;
			this.showDataTable = false;
			this.showDataChart = true;
		},

		showClickReturn() {
			this.meetingShow = false;
			this.tableShow = true;
			this.showDataTable = true;
			this.showDataChart = false;
		},

		async remove(val) {
			let res = await this.$API.attractinvestment.building.deleteBuildingsupport.post({"building_support_id": val});
			if (res.code == 200) {
				this.$message.success("删除成功")
				await this.loadSupportingFacilities(this.selectedBuilding.id);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.el-card {
    --el-card-border-color: var(--el-border-color-light);
    --el-card-border-radius: 4px;
    --el-card-padding:  0px !important;
    --el-card-bg-color: var(--el-fill-color-blank);
}
.el-card__body {
     padding: 0px !important;
}

.el-dropdown-link {
	cursor: pointer;
	color: #2a64a6;
	font-size: 30px;
}

.vacant-color {
	background-color: #fefefe;
}

.vacant-type-color {
	background-color: #cdd0d2;
	color: #cdd0d2;
	border: 1px solid #cdd0d2;
}

.strategy-color {
	background-color: #67C23A;
}

.strategy-type-color {
	background-color: #F5F5F5;
	color: #ca788f;
	border: 1px solid #ca788f;
}

.negotiation-color {
	background-color: #F56C6C;
}

.negotiation-type-color {
	background-color: #F5F5F5;
	color: #6b93dc;
	border: 1px solid #6b93dc;
}

.rented-color {
	background-color: #409EFF;
}

.rented-type-color {
	background-color: #F5F5F5;
	color: #409EFF;
	border: 1px solid #409EFF;
}

.renting-termination-color {
	color: #f10d05;
}

.renting-termination-type-color {
	background-color: #F5F5F5;
	color: #f10d05;
	border: 1px solid #f10d05;
}


::v-deep .el-dialog__body {
	border-top: 1px solid #F4F4F4;
}

.header-container2 {
	display: flex;
	color: #ffffff;

	.statistics-item {
		padding: 30px;
		background-color: #498FE4;
		margin-right: 3vw;
		border-radius: 4px;
		text-align: center;

		.name {
			font-size: 12px;
		}

		.count {
			margin-top: 5px;
			font-size: 20px;
			font-weight: bold;
		}
	}
}


.header-container {
	// display: flex;
	width: 100%;

	.total-area {
		width: 10vw;
		color: #999;
		text-align: center;

		.split-line {
			border: 1px solid #F4F4F4;
			margin: 10px 0;
		}

		.count {
			color: #1a1a1a;
			font-size: 20px;
			font-weight: bold;
			height: 30px;
		}

		.statistics-div {
			height: 30px;
		}
	}

	.investment-area {
		width: 12.7%;
		color: #999;
		text-align: center;
		margin-left: 1vw;

		.split-line {
			border: 1px solid #F4F4F4;
			margin: 10px 0;
		}

		.count {
			color: #1a1a1a;
			font-size: 20px;
			font-weight: bold;
			height: 30px;
		}

		.statistics-div {
			height: 30px;
		}
	}

	.proportion {
		width: 8vw;
		color: #999;
		text-align: center;
		padding: 1vw 0 0 0;
	}
}

.search-filter {
	display: flex;
	margin-left: 2vw;

	.el-form-item {
		width: 15vw;
		margin-right: 2vw;
	}
}

.building-switch {
	width: 100%;
	display: flex;
	align-items: center;

	.operation-container {
		width: 25%;
	}

	.switch-container {
		text-align: center;
		line-height: 55px;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;

		::v-deep .el-dropdown {
			font-size: 18px;

			color: #1a1a1a !important;
			margin: 0 5px;
		}

		.title {
			font-size: 25px;
			font-weight: 600;
			height: 55px;
			color: #1a1a1a;
			margin: 0 10px;
		}
	}

	.building-type {
		background-color: #FFFFFF;
		height: 55px;
		display: flex;
		width: 25%;
		align-items: center;

		.item-type-list {
			display: flex;
			line-height: 55px;
			text-align: center;
			width: 70px;

			.item-name {
				height: 15px;
				width: 30px;
				line-height: 20px;
			}

			.item-color {
				height: 15px;
				width: 20px;
				margin-right: 10px;
			}

		}

		.item-type-list:first-child .item-color {
			height: 15px;
			width: 20px;
			margin-right: 10px;
			border: 1px solid #aaa;
		}
	}
}

.storey-option-container {
	height: auto;
	width: 100%;


}

.storey-option-container .calendar {
	-webkit-user-select: none;
	position: relative;

	.building-map {
		margin-top: 30px;
		width: 95%;
		border: 1px solid #ccc;

		.storey {
			width: 100%;
			display: flex;
			border: 1px solid #ccc;
			background-color: #f8f9fa;

			.title {
				width: 10%;
				text-align: center;
				margin: auto;
				font-size: 14px;
			}

			.rooms {
				width: 100%;
				height: 100%;
				display: flex;

				.room {
					height: 80px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					cursor: pointer;
					border: 1px solid #ccc;
					text-align: center;
					line-height: 80px;

					p {
						color: #4C3A26;
					}
				}
			}


		}
	}
}

.storey-option-container .calendar .calendar-table {
	border-collapse: collapse;
	border-radius: 4px;
}

.storey-option-container .calendar .calendar-table tr .calendar-atom-time:hover {
	background: #ccc
}

.storey-option-container .calendar .calendar-table tr .ui-selected {
	background: #2F88FF
}

.storey-option-container .calendar .calendar-table tr .ui-cannot-selected {
	background: #bd93f9
}

.storey-option-container .calendar .calendar-table tr .ui-rented {
	background: #2F88FF
}

.storey-option-container .calendar .calendar-table tr .ui-strategy {
	background: #23ee0c
}


.storey-option-container .calendar .calendar-table tr .ui-selected:hover {
	background: #2F88FF
}

.storey-option-container .calendar .calendar-table tr,
.storey-option-container .calendar .calendar-table td,
.storey-option-container .calendar .calendar-table th {
	border: 1px solid #ccc;
	font-size: 12px;
	text-align: center;
	min-width: 11px;
	line-height: 1.8em;
	-webkit-transition: background 200ms ease;
	-moz-transition: background 200ms ease;
	-ms-transition: background 200ms ease;
	transition: background 200ms ease
}

.storey-option-container .calendar .calendar-table tbody tr {
	height: 50px
}

.storey-option-container .calendar .calendar-table tbody tr td:first-child {
	background: #F8F9FA
}

.storey-option-container .calendar .calendar-table thead th,
.storey-option-container .calendar .calendar-table thead td {
	background: #F8F9FA
}

.storey-option-container .calendar .calendar-table .td-table-tip {
	line-height: 2.4em;
	padding: 0 12px 0 19px;
	background: #fff !important
}

.storey-option-container .calendar .calendar-table .td-table-tip .clearfix {
	height: 46px;
	line-height: 46px
}

.storey-option-container .calendar .calendar-table .td-table-tip .pull-left {
	font-size: 14px;
	color: #333333
}

.storey-option-container .week-td {
	width: 75px;
	padding: 20px 0
}

.storey-option-container a {
	cursor: pointer;
	color: #2F88FF;
	font-size: 14px
}

.byted-weektime .calendar {
	-webkit-user-select: none;
	position: relative;
}

.byted-weektime .calendar .calendar-table {
	border-collapse: collapse;
	border-radius: 4px
}

.byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover {
	background: #ccc
}

.byted-weektime .calendar .calendar-table tr .ui-selected {
	background: #2F88FF
}

.byted-weektime .calendar .calendar-table tr .ui-cannot-selected {
	background: #bd93f9
}

.byted-weektime .calendar .calendar-table tr .ui-selected:hover {
	background: #2F88FF
}

.byted-weektime .calendar .calendar-table tr,
.byted-weektime .calendar .calendar-table td,
.byted-weektime .calendar .calendar-table th {
	border: 1px solid #ccc;
	font-size: 12px;
	text-align: center;
	min-width: 11px;
	line-height: 1.8em;
	-webkit-transition: background 200ms ease;
	-moz-transition: background 200ms ease;
	-ms-transition: background 200ms ease;
	transition: background 200ms ease
}

.byted-weektime .calendar .calendar-table tbody tr {
	height: 50px
}

.byted-weektime .calendar .calendar-table tbody tr td:first-child {
	background: #F8F9FA
}

.byted-weektime .calendar .calendar-table thead th,
.byted-weektime .calendar .calendar-table thead td {
	background: #F8F9FA
}

.byted-weektime .calendar .calendar-table .td-table-tip {
	line-height: 2.4em;
	padding: 0 12px 0 19px;
	background: #fff !important
}

.byted-weektime .calendar .calendar-table .td-table-tip .clearfix {
	height: 46px;
	line-height: 46px
}

.byted-weektime .calendar .calendar-table .td-table-tip .pull-left {
	font-size: 14px;
	color: #333333
}

.byted-weektime .week-td {
	width: 75px;
	padding: 20px 0
}

.byted-weektime a {
	cursor: pointer;
	color: #2F88FF;
	font-size: 14px
}

.tabs-container {
	padding-left: 0px;
	margin-top: 0px;

	:deep(.el-tabs--card>.el-tabs__header) {
		border-bottom: unset;
	}

	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item) {
		border-bottom: 1px solid rgb(230, 230, 230);
	}

	.tab-title {
		display: flex;

		.div-title {
			cursor: pointer;
		}

		.div-title:hover {
			color: #409eff;
		}

		:deep(.el-divider--vertical) {
			margin: 0 40px;
			border-left: 0px solid #303133;
			font-weight: bold;
		}
	}
}

// .num_sum {
// 	:deep(.el-card__body) {
// 		padding-bottom: 0;
// 	}
// }

.num_info {
	text-align: center;

	p {
		font-size: 28px;
		color: #303133;
		font-weight: bold;
		font-family: "Times New Roman";
	}
}

#kuang {
	position: absolute;
	background-color: blue;
	opacity: 0.3;
}
</style>
